<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>乘法口诀表</title>
    <style>
      /* 你可以在这里添加CSS样式来美化乘法表，比如设置表格的宽度、对齐方式等 */
      #cheng {
        font-family: monospace; /* 使用等宽字体可以使乘法表看起来更整齐 */
      }
    </style>
  </head>
  <body>
    <div id="cheng"></div>
    <script>
      var a = "";
      for (var i = 1; i <= 9; i++) {
        var row = ""; // 初始化当前行的字符串
        for (var b = 1; b <= i; b++) {
          // 修改内层循环条件，以生成正确的乘法表

          if (b * i < 10) {
            row += `${b}× ${i} = ${b * i}\t               `;
          } else {
            row += `${b}× ${i} = ${b * i}\t`;
          }
        }

        a += row + "<br>"; // 将当前行添加到总字符串中，并添加换行符
      }
      document.getElementById("cheng").innerHTML = a; // 使用innerHTML来解析HTML标签
    </script>
  </body>
</html>
